import React, { useState } from 'react';
import { TreeSelect, Select } from 'antd';

const { TreeNode } = TreeSelect;

var data = [
  {
    title: '锅炉运行状态',
    value: 'option1',
    children: [
      {
        title: '锅炉启炉',
        value: 'eqpt_fur_up',
      },
      {
        title: '锅炉运行',
        value: 'eqpt_fur_run',
      },
      {
        title: '锅炉停运',
        value: 'eqpt_fur_stop',
      },
      {
        title: '锅炉预启炉',
        value: 'eqpt_fur_ready_up',
      },
      {
        title: '锅炉预停运',
        value: 'eqpt_fur_ready_stop',
      },
    ],
  },
  {
    title: '汽机运行状态',
    value: 'option2',
    children: [
      {
        title: '汽机停机',
        value: 'eqpt_stmtub_halt',
      },
      {
        title: '汽机运行',
        value: 'eqpt_stmtub_start',
      },
    ],
  },
];

const aaa = () => {
  const flattenValues = [];

  const flattenData = data => {
    for (let i = 0; i < data.length; i++) {
      const { value, children } = data[i];
      flattenValues.push(value);

      if (children && children.length > 0) {
        flattenData(children);
      }
    }
  };

  flattenData(data);

  console.log(flattenValues);
};

//  ["option1", "suboption1-1", "suboption1-2", "option2", "suboption2-1", "suboption2-2"]
//['suboption1-2','suboption2-2',]

const MyTreeSelect = () => {
  const [selectedValues, setSelectedValues] = useState([
    // "option1", "suboption1-1"
  ]);
  const [visible, setVisible] = useState(true);

  const handleChange = selectedValue => {
    console.log(selectedValue, 'selectedValue');
    setSelectedValues(selectedValue);

    // 判断是否所有元素都被勾选
    const allChecked = checkAllNodes(data, selectedValue);
    if (allChecked) {
      setVisible(false);
    }

    console.log('是否所有元素都被勾选:', allChecked);
  };

  // 递归遍历节点，检查勾选状态
  const checkAllNodes = (nodes, selectedValue) => {
    let allChecked = true;

    for (let i = 0; i < nodes.length; i++) {
      const node = nodes[i];

      if (selectedValue.indexOf(node.value) === -1) {
        allChecked = false;
        break;
      }

      if (node.children) {
        allChecked = checkAllNodes(node.children, selectedValue);

        if (!allChecked) {
          break;
        }
      }
    }

    return allChecked;
  };

  return (
    <div>
      <TreeSelect
        treeDefaultExpandAll
        style={{ width: 300, margin: 200 }}
        treeCheckable
        showCheckedStrategy="SHOW_ALL"
        value={selectedValues}
        onChange={handleChange}
      >
        {renderTreeNodes(data)}
      </TreeSelect>
      {/* {visible ? (
        <TreeSelect
          treeDefaultExpandAll
          style={{ width: 300, margin: 200 }}
          treeCheckable
          showCheckedStrategy="SHOW_ALL"
          value={selectedValues}
          onChange={handleChange}
        >
          {renderTreeNodes(data)}
        </TreeSelect>
      ) : (
        <Select
          //请选择角色
          style={{ width: 300, margin: 200 }}
          allowClear
        >
        </Select>
      )} */}
    </div>
  );
};

// 递归渲染树节点
const renderTreeNodes = data => {
  return data.map(node => {
    if (node.children) {
      return (
        <TreeNode value={node.value} title={node.title} key={node.value}>
          {renderTreeNodes(node.children)}
        </TreeNode>
      );
    }

    return <TreeNode value={node.value} title={node.title} key={node.value} />;
  });
};

export default MyTreeSelect;
